<?php /*a:2:{s:69:"D:\phpstudy_pro\WWW\xiaomu\tp\app\admin\view\web\webchapters\add.html";i:1724486850;s:56:"D:\phpstudy_pro\WWW\xiaomu\tp\app\admin\view\layout.html";i:1725115306;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎使用小木CMS内容管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="/zhcms/layui_v2_9_10/css/layui.css" media="all">
    <link rel="stylesheet" href="/zhcms/style.css?v=<?php echo time();?>" media="all">

    <script src="/zhcms/jquery/jquery-3.6.0.min.js" charset="utf-8"></script>
    <script src="/zhcms/layui_v2_9_10/layui.js" charset="utf-8"></script>

</head>
<body>

<link rel="stylesheet" href="/zhcms/editor/style.css" />
<script src="/zhcms/editor/index.js"></script>

<blockquote class="layui-elem-quote">
  文章管理 > 新增文章
</blockquote>

<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 1000px; }

  .w1200{
    width:1200px;
    margin:0 auto;
  }
</style>

<div class="w1200">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-lg10">

      <input type="hidden" id="category" value="" />
      <input type="hidden" id="postuid" value="" />
      <input type="hidden" id="cover" value="" />

      <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
          <input type="text" id="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
      </div>


      <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
      </div>
    </div>
    <div class="layui-col-lg2">
      
      <ul>
        <li><button type="button" class="layui-btn savebtn" rel="0">保存草稿</button></li>
        <li class="mt15"><button type="button" class="layui-btn layui-bg-blue savebtn" rel="1">发布</button></li>
        <li class="layui-form mt15">
            <select name="interest" lay-filter="category">
              <option value="">选择文章分类</option>
              <?php if(is_array($category) || $category instanceof \think\Collection || $category instanceof \think\Paginator): $i = 0; $__LIST__ = $category;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?>
                <option value="<?php echo htmlentities((string) $vo['id']); ?>"><?php echo htmlentities((string) $vo['category_name']); ?></option>
              <?php endforeach; endif; else: echo "" ;endif; ?>
              
            </select>
        </li>

        <li class="layui-form mt15">
          <select name="interest" lay-filter="postuid">
            <option value="">选择发布者</option>
            <?php if(is_array($users) || $users instanceof \think\Collection || $users instanceof \think\Paginator): $i = 0; $__LIST__ = $users;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?>
              <option value="<?php echo htmlentities((string) $vo['id']); ?>"><?php echo htmlentities((string) $vo['nickname']); ?></option>
            <?php endforeach; endif; else: echo "" ;endif; ?>
            
          </select>
        </li>


        <li class="mt15">
            <div>添加标签</div>
            <div class="mt10">
                <textarea id="tags" placeholder="文章标签，用英文,隔开" class="layui-textarea"></textarea>
            </div>
        </li>
    
        <li class="mt15">
            <div>keywords</div>
            <div class="mt10">
                <textarea id="keywords" placeholder="SEO KEYWORDS" class="layui-textarea" style="height:180px"></textarea>
            </div>
        </li>
    
        <li class="mt15">
            <div>descriptions</div>
            <div class="mt10">
                <textarea id="descriptions" placeholder="SEO DESCRIPTIONS" class="layui-textarea" style="height:200px"></textarea>
            </div>
        </li>
    
        <li class="mt15">
            <div>
              <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 上传封面图片
              </button>
            </div>
            <div class="mt10">
                <img id="imgurl" src="" width="180" height="120"/>
            </div>
        </li>
      </ul>


    </div>
  </div>
</div>

<script>
  const { createEditor, createToolbar } = window.wangEditor
  var html = "";
  const editorConfig = {
      placeholder: 'Type here...',
      onChange(editor) {

        html=editor.getHtml();

        //console.log('editor content', html)
        // 也可以同步到 <textarea>
      },
      MENU_CONF: {}
  }


  editorConfig.MENU_CONF['uploadImage'] = {
    server: "<?php echo url('Upload/index'); ?>",
    fieldName: 'file',
    // 继续写其他配置...
    //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 2 * 1024 * 1024, //2M

    // 最多可上传几个文件，默认为 100
    //maxNumberOfFiles: 10,

    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/*'],

    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //     token: 'xxx',
    //     otherKey: 'yyy'
    // },

    // 将 meta 拼接到 url 参数中，默认 false
    //metaWithUrl: false,

    // 自定义增加 http  header
    // headers: {
    //     Accept: 'text/x-json',
    //     otherKey: 'xxx'
    // },

    // 跨域是否传递 cookie ，默认为 false
    //withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 10 * 1000, //10 秒

  }
  
  const editor = createEditor({
      selector: '#editor-container',
      html: '<p><br></p>',
      config: editorConfig,
      mode: 'default', // or 'simple'
  })

  //console.log(editor.getAllMenuKeys())

  //上传图片

  const toolbarConfig = {}
  
  const toolbar = createToolbar({
      editor,
      selector: '#toolbar-container',
      config: toolbarConfig,
      mode: 'default', // or 'simple'
  })

  $(function(){
    $(".savebtn").on("click",function(){

      var cateid = $("#category").val();
      var title = $("#title").val();
      var tags = $("#tags").val();
      var keywords = $("#keywords").val();
      var descriptions = $("#descriptions").val();
      var postuid = $("#postuid").val();
      var cover = $("#cover").val();

      if(!cateid){
        layer.msg("请选择文章分类",{offset:"t"});
        return;
      }

      if(!postuid){
        layer.msg("请选择发布者",{offset:"t"});
        return;
      }

      var status = $(this).attr("rel");
      $.post("<?php echo url('web.webchapters/add'); ?>",{
        "cateid":cateid,
        "title":title,
        "html":html,
        "status":status,
        "tags":tags,
        "keywords":keywords,
        "descriptions":descriptions,
        "postuid":postuid,
        "cover":cover

      },function(res){
        if(res.code==1){
          layer.msg(res.msg,{offset:"t"},function(){
            //var url="<?php echo url('/admin/web.webchapters/edit'); ?>";
            //var nUrl= url.replace(".html", "")+"/id/"+res.data.id+".html";
            //console.log(nUrl)
            window.location.href="<?php echo url('web.webchapters/edit'); ?>?id="+res.data.id;

          })
        }
      })
      
    })
  })


  layui.use(function(){

    var form = layui.form;

    form.on('select(category)', function(el){
      var value = el.value; // 获得被选中的值
      $("#category").val(value)
    });

    form.on('select(postuid)', function(el){
      var value = el.value; // 获得被选中的值
      $("#postuid").val(value)
    });


  })



  layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: '<?php echo url("Upload/index"); ?>', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      // obj.preview(function(index, file, result){
      //   $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
      // });
      
      // element.progress('filter-demo', '0%'); // 进度条复位
      // layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){

      console.log(res)
      // 若上传失败
      // if(res.code > 0){
      //   return layer.msg('上传失败');
      // }
      // 上传成功的一些操作
      // …
        if(res.errno == 0){
          $("#imgurl").attr("src",res.data.url);
          $("#cover").val(res.data.url);
        }else{
          layer.msg('上传失败');
        }



      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态，并实现重传
      // var demoText = $('#ID-upload-demo-text');
      // demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      // demoText.find('.demo-reload').on('click', function(){
      //   uploadInst.upload();
      // });
    },
    // 进度条
    progress: function(n, elem, e){
      //element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
})


  </script>
</body>
</html>